<template>
  <div>
    <el-form style="width: 50%;margin-left: 50px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="书名" prop="bookname">
        <el-input v-model="ruleForm.bookname"></el-input>
      </el-form-item>
      <el-form-item label="书籍类型" prop="booktype">

        <el-select v-model="ruleForm.booktypes" placeholder="请选择活动区域" style="margin: 10px" @change="selectChild">
          <el-option  v-for="item in booktypes" :label="item.type" :value="item.typeid" @click="selectChild"></el-option>
        </el-select>
        <el-select v-model="ruleForm.booktype" placeholder="请选择活动区域">
          <el-option v-for="item in booktype" :label="item.type" :value="item.typeid"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="上传图片" style="padding-bottom: 80px">

        <!--            class="upload-demo"
                    ref="upload"-->
        <el-upload
            action="http://localhost:8082/book-manager/file/fileUpload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="imgList"
            :multiple="true"
            :on-change="imgListChange">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="获取方式" style="text-align: left">
        <el-select v-model="ruleForm.isfree">
          <el-option label="付费" value="0">付费</el-option>
          <el-option label="免费" value="1">免费</el-option>
          <el-option label="积分获取" value="2">积分获取</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="价格" prop="bookprice" v-if="ruleForm.isfree==0">
        <el-input v-model="ruleForm.bookprice"></el-input>
      </el-form-item>

      <el-form-item label="积分" prop="howintegral" v-if="ruleForm.isfree==2">
        <el-input v-model="ruleForm.howintegral"></el-input>
      </el-form-item>

      <el-form-item label="上传电子书">
        <el-upload
            class="upload-demo"
            action="http://localhost:8082/book-manager/file/fileUpload"
            :on-change="handleChange"
            :file-list="fileList">
          <el-button size="small" type="primary">上传电子书</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "AlertBook",
  data() {
    return {
        ruleForm: {
          bookname: '',
          booktype: '',
          ebookaddress: '',
          isfree: '0',
          howintegral: null,
          bookprice: null,
          isentity: null,
          booktypes:null
        },
        fileList: [],
        imgList: [],
        bookImg: [],
        dialogImageUrl: '',
        dialogVisible: false,
        booktypes:[],
        booktype:[],
      rules: {
        bookname: [
          {required: true, message: '请输入书名', trigger: 'blur'},
          {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
        ],
        booktype: [
          {required: true, message: '请输入书籍类型', trigger: 'blur'}
        ],
        howintegral: [
          {required: true, message: '积分不能为空', trigger: 'blur'}
        ],
        bookprice: [
          {required: true, message: '价格不能为空', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var vm = this
          this.ruleForm.ebookaddress = this.fileList[0].response;
          var index = 0;
          this.imgList.forEach(img => {
            this.id[index] = img.id
            this.bookImg[index++] = img.bookimageaddress
          });
          //创建上传对象
          var book = {
            bookid: this.$route.query.id,
            bookname: this.ruleForm.bookname,
            typeid: this.ruleForm.booktype,
            ebookaddress: this.ruleForm.ebookaddress,
            isfree: this.ruleForm.isfree,
            howintegral: this.ruleForm.howintegral,
            bookprice: this.ruleForm.bookprice,
            isentity: this.ruleForm.isentity,
            id: this.id,
            bookimg: this.bookImg
          }
          console.log(this.id)
          // 第二种方式发送post请求
          // let formData = new FormData()
          // formData.append("book", formName)
          // formData.append("bookimg", this.bookImg)
          axios({
            method: 'post',
            url: 'http://localhost:8082/book-manager/book/addBook/',
            data: qs.stringify(book)
          }).then(function (resp) {
            if (resp.data.flag == 'success') {
              vm.$message('添加成功');
            } else {
              vm.$message('添加失败');
            }
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgListChange(file, imgList) {
      this.imgList = imgList;
      console.log(imgList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    selectChild(){
      var  th = this
      axios.get('http://localhost:8082/book-manager/bookType/selectChildern?parent='+this.ruleForm.booktypes).then(function (resp){
        console.log(resp.data)
        th.booktype = resp.data
      })
    }

  },
  created() {
    // this.id = this.$route.query.id
    //发送请求获取书籍信息
    var mv = this;
    axios.get('http://localhost:8082/book-manager/findBookById?bookId=' + this.$route.query.id).then(function (resp) {
      // alert(resp.data);
      console.log(resp.data)
      mv.ruleForm = resp.data.book
      var fileLists ={
        name:resp.data.book.bookname,
        url: resp.data.book.ebookaddress
      }
      var s = JSON.stringify(fileLists);
      mv.fileList[0] = s
      var img = resp.data.bookimg
      var index = 0;
      img.forEach(e=>{
        mv.imgList[index++] = e;
      })
      console.log(mv.imgList)
      console.log(mv.fileList)
    });
    console.log(this.imgList)
    var th = this
    axios.get('http://localhost:8082/book-manager/bookType/selectParent').then(function (resp){
      console.log(resp.data)
      th.booktypes = resp.data
    })
  }
}
</script>

<style scoped>

</style>
